<template>
  <header class="topbar">
    <div class="top-wrapper tr">
      <a href="javascript:void(0);" @click="login">{{ loginStatus ? '退出': '登录' }}</a>
    </div>
  </header>
  <main class="main-scroll">
    <Main />
  </main>
</template>
<script>
import Main from '../views/main.vue';
import { computed } from "vue";
import store from '../store'
export default {
  name: 'app',
  setup () {
    const hasLogin = store.getters['user/hasLogin'];

    const loginStatus = computed(() => {
      return hasLogin;
    });
    const login = () => {
      store.commit('user/loginStatus', false);
      store.commit('user/setUser', null)
      window.location.href = `${window.location.origin}/login.html?/#`;
    }

    return {
      loginStatus,
      login
    }
  },
  components: {
    Main
  }
};
</script>
<style lang="scss" scoped>
header.topbar {
  width: 100%;
  height: 45px;
  line-height: 45px;
  background: #222;
  font-size: 14px;
  color: #fff;
  text-align: right;
  position: absolute;
  top: 0;
  z-index: 1;
}
.top-wrapper {
  width: 1100px;
  margin: 0 auto;
}
.main-scroll {
  position: relative;
  overflow-y: auto;
  height: 100%;
}
</style>
